<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pages/Address/index?source=1" class="address-section">
			<view v-if="addressData" class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{ addressData.receive_name }}</text>
						<text class="mobile">{{ addressData.receive_phone }}</text>
					</view>
					<text class="address">
						<text v-for="(step, nindex) in addressData.show_address" :key="nindex">{{ step }}</text>
						<text v-text="' ' + addressData.address"></text>
					</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<view v-else class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen"><text class="name">请选择收货地址</text></view>
				<text class="yticon icon-you"></text>
			</view>

			<image
				class="a-bg"
				src=""
			></image>
		</navigator>
		<view v-for="(item, index) in goods" :key="index">
			<view class="goods-section">
				<navigator v-if="storeType" :url="'/pages/Store/storeDetails?id='+item.store_id" class="g-header b-b">
					<!-- <image class="logo" :src="item.shoplogo"></image> -->
					<text class="name">{{ item.store_name }}</text>
				</navigator>
				<!-- 商品列表 -->
				<view v-for="(step, nindex) in item.info" :key="nindex" class="g-item">
					<image :src="step.goods_img"></image>
					<view class="right">
						<text class="title clamp">{{ step.goods_name }}</text>
						<text class="spec">{{ step.attr }}</text>
						<view class="price-box">
							<text class="price">￥{{ step.price }}</text>
							<text class="number">x {{ step.num }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 金额明细 -->
			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">商品金额</text>
					<text class="cell-tip">￥{{ item.price }}</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">运费</text>
					<text class="cell-tip">{{fright[index]?'￥'+fright[index]:'免运费'}}</text>
				</view>
				<view @click="getCoupon(item.store_id,index)" class="yt-list-cell b-b">
					<text class="cell-tit clamp">优惠金额</text>
					<text v-if="item.coupon" class="cell-tip red">-￥{{item.coupon}}</text>
					<text v-else class="cell-tip red">使用优惠券</text>
				</view>
				<view class="yt-list-cell desc-cell">
					<text class="cell-tit clamp">备注</text>
					<input class="desc" type="text" v-model="desc[index]" placeholder="（选填）请尽量与卖家协调一致" placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		
		<view class="yt-list" style="margin-top: 60upx;">
			<view @click="getCoupon2()" class="yt-list-cell b-b">
				<text class="cell-tit clamp">平台立减</text>
				<text v-if="money" class="cell-tip red">-￥{{money}}</text>
				<text v-else class="cell-tip red">使用优惠券</text>
			</view>
		</view>
		
		<u-popup mode="bottom" v-model="show" border-radius="14" length="60%" :safe-area-inset-bottom="true">
			<view class="content" style="height: 100%;padding: 0 20upx;">
				<view style="text-align: center;color: #FD0000;font-size: 30upx;padding: 20upx 0;">优惠明细</view>
				<scroll-view scroll-y="true" style="height: 80%;padding-bottom: 30upx;">
					<view>
						<view class="coupon-box" v-for="(item,index) in couponList" :key="index" :class="(item.use && oldMoney>=Number(item.condition)) || (item.use && item.type =='店铺优惠券') ? '' : 'block'">
							<view class="coupon-left">
								<view class="coupon-price">
									<text class="price-icon">¥</text>
									<text class="price-num">{{item.amount}}</text>
								</view>
								<view class="coupon-msg">
									<view class="coupon-title">满{{item.condition}}使用</view>
									<view class="coupon-des">{{item.end_time}} 到期</view>
								</view>
								<view class="coupon-sort" :class="(item.use && oldMoney>=Number(item.condition)) || (item.use && item.type =='店铺优惠券') ? '' : 'block2'">{{item.type? item.type : '平台优惠券'}}</view>
								<view v-if="!item.use" class="coupon-sort2">不可用原因：未达到满减条件</view>
							</view>
							<view v-if="(item.use && oldMoney>=Number(item.condition)) || (item.use && item.type =='店铺优惠券')" @click="useCoupon(item.code,item.amount,item.condition)" class="coupon-btn" :style="(item.use && oldMoney>=Number(item.condition)) || (item.use && item.type =='店铺优惠券') ? '' : 'border-left:2upx dashed #999'">立即使用</view>
							<view v-else class="coupon-btn" style="border-left:2upx dashed #999;">不可用</view>
						</view>
					</view>
				</scroll-view>
				<view @click="show = false" :style="{background:themes.BackgroundLine,boxShadow:themes.shawdowColor,margin:0}" class="action-btn-group">
					<button type="primary" class="action-btn no-border buy-now-btn">关闭</button>
				</view>
			</view>
		</u-popup>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{ price }}</text>
				<text v-if="allfright>0">(含运费￥{{allfright}})</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState(['themes','storeType'])
	},
	data() {
		return {
			addressData: '',
			sku: '',
			store_id: '',
			goods_id: '',
			num: '',
			order:'',
			goods: '',
			num_arr:'',
			goods_arr:'',
			desc: [], //备注
			redeem_code:"", //平台券id
			money:"", //平台券满减价格
			condition:"", //使用优惠券后 平台券的满减条件
			store_redeem_code:[], //所有使用的店铺优惠券id
			price:0, //实付款
			allfright:0, //总运费
			fright:[],
			cart:'',
			show:false,
			couponList:[],
			index:'',
			oldMoney:0,
		};
	},
	onLoad(option) {
		if(option.cart){
			this.cart = option.cart;
		}
		this.num_arr = JSON.parse(option.num_arr);
		this.goods_arr = JSON.parse(option.goods_arr);
		this.sku = option.sku;
		this.store_id = option.store_id;
		this.goods_id = option.goods_id;
		this.num = option.num;
		this.createOrder();
	},
	methods: {
		changeAddress(item){
			this.addressData = item;
			this.getFright();
		},
		createOrder(){//创建一次性订单号
			this.$https.Order.createOrder().then(res => {
				console.log()
				this.order = res;
				this.getOrderGoods();
			}).catch(res => {
				uni.showToast({
					title:'订单创建失败'
				})
				setTimeout(()=>{
					uni.navigateBack();
				},500)
			});
		},
		getOrderGoods(){
			this.$https.Order.getOrderGoods(this.sku,this.num).then(res => {
				this.goods = res;
				this.getDefaultAddress();
			});
		},
		getDefaultAddress() {//获取默认地址
			this.$https.Order.getDefaultAddress().then(res => {
				if(res.length > 0){
					this.addressData = res[0];
					this.getFright();
				}else{
					this.calculation();
				}
			});
		},
		getCoupon(id,index){
			let sku = [],num = [];
			this.goods[index].info.forEach(item=>{
				sku.push(item.sku);
				num.push(item.num);
			})
			this.$https.Order.chooseCoupon(1,sku,num,id).then(res => {
				this.index = index;
				this.couponList = res;
				this.show = true;
			});
		},
		getCoupon2(){
			let sku = [],num = [];
			this.goods.forEach(item=>{
				item.info.forEach(step=>{
					sku.push(step.sku);
					num.push(step.num);
				})
			})
			this.$https.Order.chooseCoupon(2,sku,num).then(res => {
				this.index = '';
				this.couponList = res;
				this.show = true;
			});
		},
		useCoupon(redeem_code,money,condition){
			if(this.index || this.index === 0){
				this.goods[this.index].coupon = Number(money);
				this.goods[this.index].redeem_code = redeem_code;
			}else{
				this.redeem_code = redeem_code;
				this.money = Number(money);
				this.condition = Number(condition);
			}
			this.calculation();
			this.show = false;
		},
		getFright(){
			this.goods_arr.forEach((item,index)=>{
				if(item.length>0){
					this.$https.Order.getFright(this.addressData.show_address[0],String(this.goods_arr[index]),String(this.num_arr[index])).then(res => {
						this.fright.push(res);
						this.calculation();
					});
				}
			})
		},
		calculation(){
			this.price = 0;
			this.allfright = 0;
			this.store_redeem_code = [];
			this.goods.forEach((item,index)=>{
				item.price = 0;
				item.info.forEach(step=>{
					item.price += step.price * step.num;
				})
				this.price += item.price;
				if(item.coupon){
					item.info.forEach(step=>{
						this.store_redeem_code.push(item.redeem_code);
					})
					this.price -= item.coupon;
				}else{
					this.store_redeem_code.push("");
				}
				if(this.fright[index]){
					this.price += this.fright[index];
					this.allfright +=this.fright[index];
				}
			})
			this.oldMoney = this.price;
			if(this.redeem_code && this.money && this.condition && this.price>=this.condition){
				this.price -= this.money;
			}else{
				this.money = "";
				this.redeem_code = "";
			}
		},
		submit() {
			let redeem_code = [];
			this.goods.forEach(item =>{
				redeem_code.push(item.redeem_code)
			})
			if(!this.addressData){
				uni.showToast({
					title:'请选择收货地址',
					icon:'none'
				})
				return false;
			}
			this.$https.Order.createMemberOrder(this.order,this.store_id,this.num,this.sku,this.addressData.id,JSON.stringify(this.desc),this.store_redeem_code,this.redeem_code).then(res => {
				// if(this.cart){
				// 	this.delCart();
				// }
				uni.redirectTo({
					url:"/pages/Order/pay?order="+res.order_member_num+"&money="+this.price+"&type=1"
				})
			});
		},
		delCart(){
			this.$https.Order.delCart(String(this.sku))
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
	padding-bottom: 100upx;
}

.address-section {
	padding: 30upx 0;
	background: #fff;
	position: relative;

	.order-content {
		display: flex;
		align-items: center;
	}

	.icon-shouhuodizhi {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90upx;
		color: #888;
		font-size: 44upx;
	}

	.cen {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 28upx;
		color: #303133;
	}

	.name {
		font-size: 34upx;
		margin-right: 24upx;
	}

	.address {
		margin-top: 16upx;
		margin-right: 20upx;
		color: #909399;
	}

	.icon-you {
		font-size: 32upx;
		color: #909399;
		margin-right: 30upx;
	}

	.a-bg {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 8upx;
	}
}

.goods-section {
	margin-top: 16upx;
	background: #fff;
	padding-bottom: 1px;

	.g-header {
		display: flex;
		align-items: center;
		height: 84upx;
		padding: 0 30upx;
		position: relative;
	}

	.logo {
		display: block;
		width: 50upx;
		height: 50upx;
		border-radius: 100px;
	}

	.name {
		font-size: 30upx;
		color: #606266;
		margin-left: 24upx;
	}

	.g-item {
		display: flex;
		margin: 20upx 30upx;

		image {
			flex-shrink: 0;
			display: block;
			width: 140upx;
			height: 140upx;
			border-radius: 4upx;
		}

		.right {
			flex: 1;
			padding-left: 24upx;
			overflow: hidden;
		}

		.title {
			font-size: 30upx;
			color: #303133;
		}

		.spec {
			display: block;
			font-size: 26upx;
			color: #909399;
		}

		.price-box {
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: #303133;
			padding-top: 10upx;

			.price {
				margin-bottom: 4upx;
			}
			.number {
				font-size: 26upx;
				color: #606266;
				margin-left: 20upx;
			}
		}

		.step-box {
			position: relative;
		}
	}
}
.block{
	background: #eee !important;
	color: #999999 !important;
}
.block2{
	background: #D7D7D7 !important;
	color: #999999 !important;
}
.yt-list {
	// margin-top: 16upx;
	margin-top: 4upx;
	background: #fff;
}

.yt-list-cell {
	display: flex;
	align-items: center;
	padding: 10upx 30upx 10upx 40upx;
	line-height: 70upx;
	position: relative;

	&.cell-hover {
		background: #fafafa;
	}

	&.b-b:after {
		left: 30upx;
	}

	.cell-icon {
		height: 32upx;
		width: 32upx;
		font-size: 22upx;
		color: #fff;
		text-align: center;
		line-height: 32upx;
		background: #f85e52;
		border-radius: 4upx;
		margin-right: 12upx;

		&.hb {
			background: #ffaa0e;
		}

		&.lpk {
			background: #3ab54a;
		}
	}

	.cell-more {
		align-self: center;
		font-size: 24upx;
		color: #909399;
		margin-left: 8upx;
		margin-right: -10upx;
	}

	.cell-tit {
		flex: 1;
		font-size: 26upx;
		color: #909399;
		margin-right: 10upx;
	}

	.cell-tip {
		font-size: 26upx;
		color: #303133;

		&.disabled {
			color: #909399;
		}

		&.active {
			color: #fa436a;
		}
		&.red {
			color: #fa436a;
		}
	}

	&.desc-cell {
		.cell-tit {
			max-width: 90upx;
		}
	}

	.desc {
		flex: 1;
		font-size: 28upx;
		color: #303133;
	}
}

/* 支付列表 */
.pay-list {
	padding-left: 40upx;
	margin-top: 16upx;
	background: #fff;
	.pay-item {
		display: flex;
		align-items: center;
		padding-right: 20upx;
		line-height: 1;
		height: 110upx;
		position: relative;
	}
	.icon-weixinzhifu {
		width: 80upx;
		font-size: 40upx;
		color: #6bcc03;
	}
	.icon-alipay {
		width: 80upx;
		font-size: 40upx;
		color: #06b4fd;
	}
	.icon-xuanzhong2 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60upx;
		height: 60upx;
		font-size: 40upx;
		color: #fa436a;
	}
	.tit {
		font-size: 32upx;
		color: #303133;
		flex: 1;
	}
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 995;
	display: flex;
	align-items: center;
	width: 100%;
	height: 90upx;
	justify-content: space-between;
	font-size: 30upx;
	background-color: #fff;
	z-index: 998;
	color: #606266;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
	.price-content {
		padding-left: 30upx;
	}
	.price-tip {
		color:#fa436a;
		margin-left: 8upx;
	}
	.price {
		font-size: 36upx;
		color:#fa436a;
	}
	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 230upx;
		height: 80%;
		color: #fff;
		font-size: 32upx;
		border-radius: 100upx;
		margin-right: 16upx;
		background-color: $uni-color-primary;
	}
}
/* 优惠券 */
	.coupon-box{
		width: 100%;
		height: 160upx;
		border-radius: 12upx;
		background: #FFF6F1;
		color: #FD0000;
		margin-bottom: 30upx;
		padding: 12upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		overflow: hidden;
		.coupon-left{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.coupon-sort{
				font-size: 24upx;
				position: absolute;
				top: 0;
				left: 0;
				width: 200upx;
				text-align: center;
				height: 40upx;
				line-height: 40upx;
				background: #FFE5E6;
				border-bottom-right-radius: 12upx;
			}
			.coupon-sort2{
				font-size: 20upx;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 380upx;
				text-align: center;
				height: 40upx;
				line-height: 40upx;
				background: #D7D7D7 !important;
				color: #999999 !important;
				border-top-right-radius: 12upx;
			}
			.coupon-type{
				font-size: 34upx;
				position: absolute;
				bottom: -20upx;
				right: -20upx;
				transform:rotate(-20deg);
				width: 100upx;
				height: 100upx;
				line-height: 92upx;
				border-radius: 100%;
				background: #FF7777;
				color: #fff;
				text-align: center;
				border: 6upx solid #fff;
				box-shadow: 0px 0px 0px 6upx #FF7777;
			}
			.coupon-price{
				width: 200upx;
				text-align: center;
				.price-icon{
					font-weight: bold;
					font-size: 36upx;
				}
				.price-num{
					font-weight: bold;
					font-size: 70upx;
				}
			}
			.coupon-msg{
				margin-left: 20upx;
				line-height: 46upx;
			}
		}
		.coupon-btn{
			font-size: 30upx;
			width: 160upx;
			height: 100%;
			border-left: 2upx dashed #FD0000;
			text-align: center;
			line-height: 140upx;
		}
	}
	.action-btn-group{
		display: flex;
		height: 76upx;
		border-radius: 100px;
		overflow: hidden;
		box-shadow: 0 20upx 40upx -16upx #fa436a;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
		margin-left: 20upx;
		position:relative;
		&:after{
			content: '';
			position:absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28upx;
			width: 0;
			border-right: 1px solid rgba(255,255,255,.5);
		}
		.action-btn{
			display:flex;
			align-items: center;
			justify-content: center;
			width: 180upx;
			height: 100%;
			font-size: $font-base ;
			padding: 0;
			border-radius: 0;
			background: transparent;
		}
	}
</style>
